<template>
  <div class="app">
    <!-- 在父组件内部：只能出现子组件,不能出现孙子组件 -->
    <!-- 
           事件源：App根组件的子组件Child
           事件类型: @study:是一个自定义事件
           事件回调：父组件App提供的方法，自定义事件需要通过$emit方法才可以触发
           //自定义事件简单的写法
          <Child @study="handler" />
        -->
    <Child  ref="child"/>
  </div>
</template>

<script>
import Child from "./components/Child";
export default {
  name: "",
  components: {
    Child,
  },
  methods: {
    //根组件App的方法:params不是event，原生DOM事件，在浏览器调用的时候，才注入event
    //并非原生DOM事件：注入并非event
    handler(params) {
      console.log(params);
    },
  },
  //组件挂载完毕:当前组件结构已经完整了---Child组件存在了
  mounted() {
    //获取事件源Child
    //获取Child事件源，绑定自定义事件$on参数
    //第一个参数:自定义事件类型  第二参数:回调函数，当自定义事件触发的时候会执行！
    this.$refs.child.$on("study",(params)=>{
         console.log('儿子child给我的数据',params);
    });

  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
  background: skyblue;
  overflow: hidden;
}
</style>
